//����ҳ��������ʾ
window.onload = function () {
    swipeLeft();

//����һ������
}
//����һ��Ҫ�����õĺ���
function swipeLeft() {
    //��ȡ��ߵĴ����

    var pullLeft = document.querySelector('.content-left');
//��ȡUL
    var ul = pullLeft.querySelector('ul');
//��ȡLI
    var lis = ul.querySelectorAll('li');
//��������߶�
    var top = 0;
//�������������߶�
    var maxTop = 0;
//���������ܵ���߶�
    var minTop = pullLeft.offsetHeight - ul.offsetHeight;
//�����ƶ�ul�����߶�
    var swiMax = maxTop + 100;
//�����ƶ�UL����С�߶�
    var swiMin = minTop - 100;
    var setTranslate = function (y) {
        ul.style.transform = 'translateY(' + y + 'px)';
        ul.style.webkitTransform = 'translateY(' + y + 'px)';
    }
    var addTransition = function () {
        ul.style.transition = 'all 1s';
        ul.style.webkitTransition = 'all 1s';
    }
    var moveTransition = function () {
        ul.style.transition = 'none';
        ul.style.webkitTransition = 'none';
    }
    itcast.tap(pullLeft, function (e) {
        var target = e.target.parentNode;
        for (var i = 0; i < lis.length; i++) {
            lis[i].classList.remove('current');
            lis[i].index = i;
        }
        target.classList.add('current');
        var y = target.index * (-50);
        if (y > maxTop) {
            y = maxTop;
        }
        if (y < minTop) {
            y < minTop;
        }
        addTransition();
        setTranslate(y);
    })
    var startY = 0;
    var moverY = 0;
    var disranceY = 0;
    pullLeft.addEventListener('touchstart', function (e) {
        startY = e.targetTouches[0].clientY;
    })
    pullLeft.addEventListener('touchmove', function (e) {
        moverY = e.targetTouches[0].clientY;
        disranceY = moverY - startY;
        moveTransition();
        var y = top + disranceY;
        if (y > swiMax) {
            y = swiMax;
        }
        if (y < swiMin) {
            y = swiMin
        }
        setTranslate(y);

    })
    pullLeft.addEventListener('thouhend',function(e){
        top=top+disranceY;
        if(top>maxTop){
            top=maxTop;
        }
        if(top<minTop){
            top=minTop;
        }
        addTransition();
        setTranslate(top);
        startY=0;
        moverY=0;
        disranceY=0;
    })
}

